<template>
  <el-container>
    <el-header style="font-size: 20px"><img style="float: left" height="65px" src="../assets/logo.png">顶部..........</el-header>

    <el-container>

      <el-aside width="200px">
        <el-menu default-active="2" class="el-menu-vertical-demo" router>
          <el-submenu index="/showAll">

            <template slot="title">
              <i class="el-icon-position"></i>
              <span>书籍管理</span>
            </template>

            <el-menu-item-group>
              <el-menu-item index="/show"><span class="el-icon-thumb"></span>书籍列表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-menu-item index="">
            <i class="el-icon-loading"></i>
            <span slot="title" @click="handleClick">尚未开发</span>
          </el-menu-item>

          <el-menu-item index="" >
            <i class="el-icon-loading"></i>
            <span slot="title" @click="handleClick">尚未开发</span>
          </el-menu-item>

          <el-menu-item index="">
            <i class="el-icon-user-solid"></i>
            <span slot="title" @click="handleClick">用户管理</span>
          </el-menu-item>

        </el-menu>
      </el-aside>

      <el-container>

        <el-main>
          <div class="div1">
            <router-view/>
          </div>
        </el-main>

      </el-container>
    </el-container>
    <el-footer style="font-size: 20px"><img style="float: left" height="65px" src="../assets/logo.png">底部...........</el-footer>
  </el-container>
</template>

<script>
    export default {
        name: "MyComponent",
      methods:{
        handleClick(){
          this.$notify({
            title: '提示',
            message: '该内容正在开发中...',
            offset: 100,
            type:"warning",
          });
        }
      }
    }
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #409EFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    height: 600px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .div1{
    height: 300px;
  }
</style>
